<!--
event事件要加@符号
-->
<template>
 <div>
   <div id="treeMsg">
     <el-tree
         style="width: 200px"
         :data="treeData"
         :props="treeProps"
         show-checkbox
         node-key="code"
         default-expand-all="default-expand-all"
         :expand-on-click-node="false"
         @check="TreeCheck"
     >
     </el-tree>
   </div>
   <div id="msgShow">
      <ul style="width: 210px;height: 180px;background-color: red;float: left;margin-left: 10px;margin-top: 10px">
        <li>课程代码:1</li>
        <li>课程名称:1</li>
        <li>课程难度:1</li>
        <li>教授者:1</li>
        <li>课程图片:1</li>
        <li>课程详情</li>
        <li>视频地址:</li>
      </ul>
   </div>
 </div>
</template>

<!--:props="defaultProps"-->
<script>
import axios from "axios";

export default {
  name: "English",
  data() {
    return {
      treeData: [],
      //配置节点的名称
      treeProps:{
        id:'code',
        label:'name',
      }
    };
  },
  created() {
    axios({
      url: "api/tree/EnglishTree",
      method: 'post',
      data: '',
    }).then((res) => {
      // 使用箭头函数,使得promise中的this指向当前组件
      let arr = [{
        code: 'qb',
        name: '全部',
        children: []
      }];
      const datas = res.data.data;
      for (let i = 0; i < datas.length; i++) {
        const param = {code: datas[i].code, name: datas[i].name};
        arr[0].children.push(param);
      }
      this.treeData = arr;
      console.log("res", this.treeData);
    }).catch(error => {
      console.error('错误信息:', error);
    });
  },
  methods:{
    //当复选框被点击的时候触发
    TreeCheck(checkedNodes,nodeStatus ){
      console.log(checkedNodes)
      console.log(nodeStatus)
      console.log("选中某个节点")
    },

  }
}
</script>


<style scoped>
#treeMsg{
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
#msgShow{
  margin-top: 30px;
  float: left;
  border: 11px solid #B3C0D1;
  //background-color: steelblue;
  width: 1000px;
  height: 500px;
}
</style>




-->
<!--<template>-->
<!--  <div>-->
<!--    <el-tree-->
<!--        :data="treeData"-->
<!--        show-checkbox-->
<!--        node-key="code"-->
<!--        :props="defaultProps">-->
<!--    </el-tree>-->
<!--  </div>-->
<!--</template>-->


<!--<script>-->
<!--import axios from "axios";-->

<!--export default {-->
<!--  name: "English",-->
<!--  data() {-->
<!--    return {-->
<!--      treeData: [],-->
<!--      defaultProps: {-->
<!--        children: 'children',-->
<!--        name: 'label'-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    axios({-->
<!--      url: "api/tree/EnglishTree",-->
<!--      method: 'post',-->
<!--      data: '',-->
<!--    }).then(function (res) {-->
<!--      let arr=[];-->
<!--      arr.push({-->
<!--        id: 1,-->
<!--        label: '全部',-->
<!--        children: []-->
<!--      },);-->
<!--      //在普通函数中，this 的值由函数被调用的方式决定。在这种情况下，this 的值通常指向调用该函数的对象。-->
<!--      // 但是在 Promise 的回调函数中，通常情况下 this 的值会丢失，指向的是全局对象（在浏览器中是 window 对象）或者 undefined-->
<!--      console.log(this,"this")-->
<!--      const datas = res.data.data;-->
<!--      for (let i = 0; i < datas.length; i++) {-->
<!--        const param = {code: datas[i].code, name: datas[i].name};-->
<!--        arr[0].children[i]=param;-->
<!--      }-->
<!--      this.treeData=arr;-->
<!--      console.log("res", arr);-->
<!--    });-->
<!--  }-->
<!--}-->
<!--</script>-->


<!--<style scoped>-->

<!--</style>-->
